@extends('admin.layout.base')
@section('content')
    <div class="panel-content" id="app" v-cloak>
        <div class="panel-body">
            <div class="panel-header">
                <div class="panel-title"> 需求管理 </div>
                <el-tabs v-model="tabValue" type="card" @tab-click="search()">
                    <el-tab-pane label="全 部" name="0"></el-tab-pane>
                    <el-tab-pane label="正 常" name="1"></el-tab-pane>
                    <el-tab-pane label="待审核" name="2"></el-tab-pane>
                    <el-tab-pane label="未通过" name="3"></el-tab-pane>
                    <el-tab-pane label="投标中" name="4"></el-tab-pane>
                    <el-tab-pane label="已中标" name="5"></el-tab-pane>
                    <el-tab-pane label="已完成" name="6"></el-tab-pane>
                </el-tabs>
            </div>
            <div class="panel-main">
                <div class="panel-btns">
                    <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                    <el-button type="primary" icon="fa fa-plus" @click="exports()" size="small"> 导出</el-button>
                    <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
                    {{--<el-button type="info" icon="fa fa-trash" @click="multiDelete()" size="small"> 删除</el-button>--}}
                </div>
                <div class="panel-search">
                    <div class="panel-search-item">
                        <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入需求标题/联系电话/公司名称" class="input-with-select">
                            <el-button type="primary" @click="search()" slot="append" icon="el-icon-search"></el-button>
                        </el-input>
                    </div>
                    <div class="panel-search-item">
                        <el-cascader size="medium" clearable placeholder="全部类目"
                                     separator=">"
                                     :show-all-levels="false"
                                     :options="categoys"
                                     @change="cascaderChange"
                                     v-model="cateCascader">
                        </el-cascader>
                    </div>
                    <div class="panel-search-item">
                        <el-date-picker
                                size="medium"
                                v-model="date"
                                type="daterange"
                                @change="pickerChange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <el-table v-loading="loading"
                          element-loading-text="努力加载中..."
                          element-loading-spinner="el-icon-loading"
                          ref="multipleHandle"
                          tooltip-effect="dark"
                          @selection-change="handleSelectionChange"
                          :data="listData.data" border>
                    <el-table-column align="center" type="selection" width="40"></el-table-column>
                    <el-table-column prop="title" label="标题" width="120" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="company_name" label="公司名" width="100" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="link_name" label="联系人" width="80" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column prop="link_phone" label="联系电话" width="115"></el-table-column>
                    <el-table-column align="center" prop="price" label="预算(万)" width="75"></el-table-column>
                    <el-table-column align="center" prop="number" label="投标人数" width="77"></el-table-column>
                    <el-table-column align="center" prop="bid_costs" label="投标费(元)" width="88"></el-table-column>
                    <el-table-column align="center" prop="service_charge" label="服务费(%)" width="88"></el-table-column>
                    <el-table-column align="center" prop="area" label="区域" width="75"></el-table-column>
                    <el-table-column align="center" prop="end_at" label="需求截止日期" width="160"></el-table-column>
                    <el-table-column align="center" prop="pay_at" label="支付截止日期" width="160"></el-table-column>
                    <el-table-column align="center" prop="bid_text" label="投标" width="80">
                        <template slot-scope="scope"> <span v-html="scope.row.bid_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="status_text" label="状态" width="80">
                        <template slot-scope="scope"> <span v-html="scope.row.status_text"></span> </template>
                    </el-table-column>
                    <el-table-column align="center" prop="evaluate_status_text" label="评价" width="80">
                        <template slot-scope="scope"> <span v-html="scope.row.evaluate_status_text"></span> </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.status == 2 || scope.row.status == 3" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain>同意</el-button>
                            <el-button v-if="scope.row.status == 2" @click="lock(scope.row.id)" icon="fa fa-lock" type="danger" size="mini" plain>拒绝</el-button>
                            <el-button @click="edit(scope.row.id)" icon="fa fa-edit" type="primary" size="mini" plain>详情</el-button>
                            <el-button v-if="scope.row.status == 1" @click="push(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain>推送方式</el-button>
                            <el-button v-if="scope.row.status == 1" @click="bid_log(scope.row.id)" icon="fa fa-edit" type="primary" size="mini" plain>投标记录</el-button>
                            <el-button v-if="scope.row.status == 4" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="success" size="mini" plain>上架</el-button>
                            <el-button v-if="scope.row.status == 1" @click="close(scope.row.id)" icon="fa fa-lock" type="danger" size="mini" plain>下架</el-button>
                            {{--<el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>--}}
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination"  v-if="listData && listData.total">
                    <div class="pagination-total">共 <em> @{{listData.total}} </em> 条记录</div>
                    <el-pagination v-if="listData.last_page > 1"
                                   background
                                   :page-size="listData.per_page"
                                   layout="prev, pager, next, jumper"
                                   :total="listData.total"
                                   prev-text="上一页"
                                   next-text="下一页"
                                   :current-page="listData.current_page"
                                   @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>
        <!-- 选择推送方式弹窗-->
        <el-dialog
                v-if="dialog.show"
                :title="dialog.title"
                :top="dialog.top"
                :visible.sync="dialog.show"
                :width="dialog.width">
            <el-form :model="form" ref="form" label-width="100px">
                <el-form-item label="推送方式：" prop="way" required>
                    <div v-if="form.bid != 3">
                        <el-radio-group v-model="form.way" @change="initSelect">
                            <el-radio :label="1" border>需求大厅</el-radio>
                            <el-radio :label="2" border>选择投标供应商</el-radio>
                            <el-radio :label="3" border>选择中标供应商</el-radio>
                        </el-radio-group>
                    </div>

                    <div v-if="form.bid == 3">
                        <el-radio-group v-model="form.way" @change="initSelect">
                            <el-radio :label="1" border>需求大厅</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>
                <div v-if="form.way != 1">
                    <div class="panel-search" style="width: 350px; float: right;">
                        <div class="panel-search-item">
                            <el-input  size="medium" v-model="bid_params.kwd" clearable placeholder="请输入用户名/账号" class="input-with-select">
                                <el-button type="primary" @click="store_search()" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </div>
                    </div>
                    {{--选择投标用户--}}
                    <div v-if="form.way == 2">
                        {{--已投标供应商--}}
                        <div style="font-size: 16px;margin-top: 10px;">已投标供应商</div>
                        <el-table :data="bid_ids" style="width: 100%">
                            <el-table-column prop="store_name" label="供应商店铺名"></el-table-column>
                            <el-table-column prop="bid_time" label="投标时间"></el-table-column>
                        </el-table>
                        {{--未投标供应商--}}
                        <div style="font-size: 16px;margin-top: 10px;">未投标供应商</div>
                        <el-table ref="multipleTable"
                                  :data="bidData.data"
                                  @selection-change="handleSelectionChange1"
                                  tooltip-effect="dark"
                                  style="width: 100%">
                            <el-table-column align="center" type="selection" width="40"></el-table-column>
                            <el-table-column align="center" prop="username" label="用户名"></el-table-column>
                            <el-table-column align="center" prop="store.store_name" label="店铺名称"></el-table-column>
                        </el-table>
                    </div>
                    {{--选择中标用户--}}
                    <el-table v-if="form.way == 3"
                              ref="singleTable"
                              :data="bidData.data"
                              @current-change="handleCurrentChange"
                              highlight-current-row
                              style="width: 100%">
                        <el-table-column align="center" property="username" label="用户名"></el-table-column>
                        <el-table-column align="center" property="store.store_name" label="店铺名称"></el-table-column>
                    </el-table>
                    <div class="pagination" v-if="bidData && bidData.total">
                        <div class="pagination-total">共 <em> @{{bidData.total}} </em> 条记录</div>
                        <el-pagination v-if="bidData.last_page > 1"
                                       background
                                       :page-size="bidData.per_page"
                                       layout="prev, pager, next, jumper"
                                       :total="bidData.total"
                                       prev-text="上一页"
                                       next-text="下一页"
                                       :current-page="bidData.current_page"
                                       @current-change="changePage1">
                        </el-pagination>
                    </div>
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" @click="store_update()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
@endsection
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script>
        let app = new Vue({
            el: '#app',
            data: function() {
                return {
                    listData: [],//列表数据
                    cateCascader: [],//连级类目
                    tabValue: 0,//tab
                    date: null,//日期范围
                    params: {!! $params !!},
                    // params: {kwd:'', page:1, status:0, start:'', end:'', cid:0},
                    loading: false,
                    multipleSelection:[],//多选项
                    categoys: {!! $categorys !!},
                    demand_num:'',//投标供应商数量
                    //选择推送方式
                    bidData: [],//投标用户数据
                    bid_ids: [],//已投标用户数据
                    dialog: {
                        title: '',
                        top: '15vh',
                        show: false,
                        width: '800px'
                    },
                    bid_params: {kwd:'', type:2, status:1, page:1, ids:[]},
                    form:null,
                }
            },
            created(){
                this.list();
            },
            methods: {
                //分页
                changePage(val) {
                    this.params.page = val;
                    this.list();
                },
                //列表
                list(){
                    let that = this;
                    this.loading = true;
                    setTimeout(()=>{
                        $.get("{{ route('admin.demand.list') }}",this.params,function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.listData = res.data;
                                that.loading = false;
                            }
                        },'JSON');
                    },500);
                },
                //新增
                create(){
                    window.location.href = "{{ route('admin.demand.edit') }}";
                },
                //编辑
                edit(id){
                    window.location.href = "{{ route('admin.demand.edit') }}" + '?id=' + id;
                },
                //查看投标记录
                bid_log(id){
                    window.location.href = "{{ route('admin.bid.index') }}" + '?demand_id=' + id;
                },
                //时间筛选
                pickerChange() {
                    if (this.date) {
                        this.params.start = moment(this.date[0]).format('YYYY-MM-DD');
                        this.params.end = moment(this.date[1]).format('YYYY-MM-DD');
                    } else {
                        this.params.start = '';
                        this.params.end = '';
                    }
                },
                //类目筛选
                cascaderChange(){
                    if (this.cateCascader.length) {
                        this.params.cid = this.cateCascader[this.cateCascader.length-1];
                    } else {
                        this.params.cid = 0;
                    }
                },
                //筛选
                search(){
                    this.params.page = 1;
                    switch (this.tabValue) {
                        case '1':
                            this.params.status = 1;
                            this.params.bid = 0;
                            break;
                        case '2':
                            this.params.status = 2;
                            this.params.bid = 0;
                            break;
                        case '3':
                            this.params.status = 3;
                            this.params.bid = 0;
                            break;
                        case '4':
                            this.params.bid = 2;
                            this.params.status = 0;
                            break;
                        case '5':
                            this.params.bid = 3;
                            this.params.status = 0;
                            break;
                        case '6':
                            this.params.bid = 4;
                            this.params.status = 0;
                            break;
                        default:
                            this.params.status = 0;
                            this.params.bid = 0;
                            break;
                    }
                    this.list();
                },
                //锁定
                lock(id){

                    this.$prompt('请输入拒绝原因', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputErrorMessage: '请输入拒绝原因'
                    }).then(({ value }) => {
                        let that = this;
                        $.post("{{ route('admin.demand.lock') }}",{id: id,reason:value, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });


                },
                //激活
                active(id){
                    let that = this;
                    this.$confirm('请确定已经设置了此需求的服务费类型？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.demand.active') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
                //下架
                close(id){
                    this.$prompt('请输入下架原因', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        inputErrorMessage: '请输入下架原因'
                    }).then(({ value }) => {
                        let that = this;
                        $.post("{{ route('admin.demand.close') }}",{id: id,reason:value, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '取消输入'
                        });
                    });
                },
                //导出
                exports(){
                    if(this.multipleSelection.length == 0){
                        var msg = '确定要导出所有的需求吗？';
                    }else {
                        var msg = '确定要导出选择的需求吗？';
                    }
                    this.$confirm(msg, '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        window.location.href = "{{ route('admin.demand.exports') }}"+'?ids='+this.multipleSelection.join('-');
                    }).catch(() => {});
                },
                // 多选删除
                multiDelete(){
                    if(this.multipleSelection.length == 0){
                        this.$message.error('请至少选择一项你要删除的项');return false;
                    }
                    this.destroy(this.multipleSelection);
                },
                handleSelectionChange(val) {
                    let select = [];
                    if(val.length > 0){
                        val.filter((item)=>{
                            if(select.indexOf(item.id) === -1){
                                select.push(item.id)
                            }
                        });
                        this.multipleSelection = select;
                    }else{
                        this.multipleSelection = [];
                    }
                },
                //删除
                destroy(id){
                    let that = this;
                    this.$confirm('确定要删除选中的需求信息吗？', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        $.post("{{ route('admin.demand.destroy') }}",{id: id, _token: "{{csrf_token()}}"},function (res) {
                            if(res.code){
                                that.$message.error(res.msg);
                            }else{
                                that.list();
                            }
                        },'JSON');
                    }).catch(() => {});
                },
                //清空选择
                initSelect(){
                    this.form.bid_id = [];
                },


                //选择推送方式
                push(info){
                    let that = this;
                    if (info.bid == 3) {
                        info.way = 1;
                    }
                    that.form = {
                        id: info.id,
                        way: info.way,
                        bid: info.bid,
                        number: info.number,
                        limit_num: info.limit_num,
                        _token: "{{csrf_token()}}"
                    };
                    that.dialog.title = '选择推送方式';
                    that.dialog.show = true;
                    that.bid_ids = info.bid_id;//已选择的供应商
                    //查询未选择的供应商
                    let ids = [];
                    if(info.bid_id.length > 0){
                        info.bid_id.filter((item)=>{
                            if(ids.indexOf(item.store_id) === -1){
                                ids.push(item.store_id)
                            }
                        });
                        that.bid_params.ids = ids;
                    }else{
                        that.bid_params.ids=[];
                    }
                    that.bid_list();
                },
                //供应商列表
                bid_list(){
                    let that = this;
                    $.get("{{ route('admin.demand.user_list') }}",that.bid_params,function (res) {
                        if(res.code){
                            that.$message.error(res.msg);
                        }else{
                            that.bidData = res.data;
                        }
                    },'JSON');
                },
                //分页
                changePage1(val) {
                    this.bid_params.page = val;
                    this.bid_list();
                },
                //筛选
                store_search(){
                    this.bid_params.page = 1;
                    this.bid_list();
                },
                //单选-中标
                handleCurrentChange(val) {
                    this.form.bid_id = val.id;
                },
                //多选-投标
                handleSelectionChange1(val) {
                    let select = [];
                    if(val.length > 0){
                        val.filter((item)=>{
                            if(select.indexOf(item.id) === -1){
                                select.push(item.id)
                            }
                        });
                        this.form.bid_id = select;
                    }else{
                        this.form.bid_id =[];
                    }
                },
                //更新
                store_update(){
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let that = this;
                            if(that.form.way == 2) {
                                if(that.form.bid_id == null || that.form.bid_id.length == 0){
                                    this.$message.error('请至少选择一位投标供应商');return false;
                                }else if(that.form.bid_id.length >that.form.limit_num) {
                                    this.$message.error('投标人数已满，该需求最多可以选择'+that.form.limit_num+'位供应商');return false;
                                }else if(that.form.bid_id.length + that.form.number  > that.form.limit_num) {
                                    this.$message.error('投标人数已满，该需求最多可以选择' + that.form.limit_num + '位供应商');return false;
                                }
                            }else if(that.form.way == 3) {
                                if(that.form.bid_id == null || that.form.bid_id.length == 0){
                                    this.$message.error('请至少选择一位投标供应商');return false;
                                }else if(1 + that.form.number  > that.form.limit_num) {
                                    this.$message.error('投标人数已满，该需求最多可以选择' + that.form.limit_num + '位供应商');return false;
                                }
                            }
                            this.$confirm('确定推送吗？', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                $.post("{{ route('admin.demand.store_update') }}",this.form,function (res) {
                                    if(res.code){
                                        that.$message.error(res.msg);
                                    }else{
                                        that.$message({
                                            type: 'success',
                                            duration: '1000',
                                            message: res.msg,
                                            onClose:() =>{
                                                that.dialog.show = false;
                                                that.list();
                                            }
                                        });
                                    }
                                },'JSON');
                            }).catch(() => {});
                        }
                    });
                },

            }
        });
    </script>
@endsection
